<template>
    <div class="">
        <TopView />
    <div class="cart-container">
      <h4>我的购物车</h4>
      
      <div class="cart-header">
        <div class="select-all">
          <input type="checkbox" 
                 :checked="selectAll" 
                 @change="toggleSelectAll"> 全选
        </div>
        <div class="coursename">课程名称</div>
        <div class="price">原价</div>
        <div class="discount">优惠</div>
        <div class="operation">操作</div>
      </div>
      
      <div class="cart-list">
        <div class="cart-item" v-for="(item, index) in cartItems" :key="index">
          <div class="select">
            <input type="checkbox" v-model="item.selected" @change="updateSelectAll">
          </div>
          <div class="course-info">
            <img :src="item.src"   alt="">
            <div class="coursetitle">{{ item.title }}</div>
          </div>
          <div class="courseprice">
            <span v-if="item.oldprice" class="discounted">¥{{ item.oldprice.toFixed(2) }}</span>
            <span v-if="item.price" class="coursenewprice">¥{{ item.price.toFixed(2) }}</span>
          </div>
          <div class="coursediscount"> 
    <span v-if="item.discountTag" 
          :class="['discount-tag', 
                  {'discount-tag-special': item.discountTag === '限时特惠'},
                  {'discount-tag-original': item.discountTag === '原价'}]">
      {{ item.discountTag }}
    </span>
  </div>
          <div class="courseactions">
            <button class="delete-btn" @click="removeItem(index)">删除</button>
          </div>
        </div>
      </div>
      
      <div class="cart-footer">
        <div class="footer-left">
          <input type="checkbox" 
                 :checked="selectAll" 
                 @change="toggleSelectAll"> 全选
        </div>
        <div class="footer-right">
          <div class="total-price">
            合计：¥{{ totalPrice.toFixed(2) }}
          </div>
          <button class="checkout-btn">提交</button>
        </div>
      </div>
    </div>
    <FooterView />
</div>
  </template>
  
  <script>
  import FooterView from "@/components/footerView.vue";
  import TopView from "@/components/topView.vue";
  export default {
    data() {
     return {
      selectAll: false,
      cartItems: [
        {
          src:"https://oos-hazz.ctyunapi.cn/online-course/MQ%E6%B6%88%E6%81%AF%E9%98%9F%E5%88%97-1699063416561336320.jpg",
          title: "宇哥带你学Java之消息队列MQ",
          subtitle: "MQ消息队列",
          price: 2999,
          oldprice: null, 
          discountTag: "原价",
          selected: false
        },
        {
          src:"https://oos-hazz.ctyunapi.cn/online-course/lQLPJw-5RYZcElTMyM0BSrAeZ3aicl1m4AOnon0oQP8A_330_200-1608044920902254592.png",
          title: "Python实现接口自动化测试",
          subtitle: "Python",
          price: 99.9,
          oldprice: 999.9,
          discountTag: "限时特惠",
          selected: false
        },
        {
            src:"https://oos-hazz.ctyunapi.cn/online-course/Webpack%E5%BF%AB%E9%80%9F%E5%85%A5%E9%97%A8-1699959221103099904.jpg",
          title: "前端构建工具 Webpack教程",
          subtitle: "Webpack",
          price: 1,
          oldprice: 10,
          discountTag: "限时特惠",
          selected: false
        },
        {
            src:"https://oos-hazz.ctyunapi.cn/online-course/java-1646815099383447552.png",
          title: "宇哥带你学Java之SpringCloud全家福",
          subtitle: "Java基础",
          price: 7999,
          oldprice: null,
          discountTag: "原价",
          selected: false
        },
        {
            src:"https://oos-hazz.ctyunapi.cn/online-course/java-1646815099383447552.png",
          title: "宇哥带你学Java之Java基础",
          subtitle: "Java基础",
          price: 4999,
          oldprice: null,
          discountTag: "原价",
          selected: false
        }
      ]
    };
  },
  components: {
    FooterView,
    TopView,
   
  },
  computed: {
    totalPrice() {
    return this.cartItems.reduce((total, item) => {
      if (item.selected) {
        return total + item.price;
      }
      return total;
    }, 0);
  }
  },
  methods: {
    toggleSelectAll() {
      const newSelectAll = !this.selectAll;
      this.selectAll = newSelectAll;
      this.cartItems.forEach(item => {
        item.selected = newSelectAll;
      });
    },
    updateSelectAll() {
      this.selectAll = this.cartItems.length > 0 && this.cartItems.every(item => item.selected);
    },
    removeItem(index) {
      this.cartItems.splice(index, 1);
      this.updateSelectAll();
    }
  }
};
</script>
  <style scoped lang="scss">
.cart-container {
  max-width: 1200px;
  margin: 40px auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
}

.cart-header,
.cart-item {
    margin-top: 10px;
  display: grid;
  grid-template-columns: 1fr 5fr 2fr 2fr 2fr;
  padding: 12px 0;
  border-bottom: 1px solid #eee;
}

.cart-header {
  background-color: #f9f9f9;
  font-weight: bold;
  color: #7e7c7c;
}

.cart-item:hover {
  background-color: #f5f5f5;
}

.cart-item .courseprice,
.cart-item .coursediscount,
.cart-item .courseactions {
  text-align: left;
}

.course-info{
    display: flex;

     img {
width: 150px;
height: 100px;
     }
}
.coursetitle {
  margin-left: 10px;
  font-size: 14px;
  color: #858181;
  font-weight: 500;
}

.coursenewprice{
    color: red;
}
.discounted {
  text-decoration: line-through;
  color: #999;
  margin-right: 10px;
}

.discount-tag {
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
}

.discount-tag-special {
  background-color: #ff4d4f;
  color: white;
}

.discount-tag-original {
  background-color: #1890ff;
  color: white;
}


.delete-btn {
  background-color: #ff4d4f;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.delete-btn:hover {
  background-color: #e63946;
}
.cart-footer {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  border-top: 1px solid #eee;
}

.footer-left {
  display: flex;
  align-items: center;
  font-size: 14px;
}

.footer-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.total-price {
  font-size: 16px;
  font-weight: bold;
  color: #e63946;
}

.checkout-btn {
  background-color: #00cf8c;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  font-weight: bold;
}

.checkout-btn:hover {
  background-color: #00a870;
}

</style>